<template>
  <view
    class="area-picker transition"
    :style="`bottom:${isShowPicker ? 0 : -700}rpx;`"
  >
    <view class="picker-title">
      <view class="picker-title-text">已选时间：2025-02-14 15:30至2025-02-14 16:30</view>
    </view>
    <!--    style="z-index: {{ isFirstIn ? -1 : 11 }}"-->
    <view class="btnList">
      <view
        class=""
        @tap="cancel"
        >取消</view
      >
      <view
        class="confirm"
        @tap="confirm"
        >确定</view
      >
    </view>
    <picker-view
      :value="value"
      class="my-picker"
      @change="onChange"
    >
      <picker-view-column data-code="year">
        <view
          v-for="(item, index) in yearList"
          :key="index"
          class="picker-item flexCenter"
          >{{ item }}</view
        >
      </picker-view-column>
      <picker-view-column>
        <view
          v-for="(item, index) in monthList"
          :key="index"
          class="picker-item flexCenter"
          >{{ item }}</view
        >
      </picker-view-column>

      <picker-view-column>
        <view
          v-for="(item, index) in dateList"
          :key="index"
          class="picker-item flexCenter"
          >{{ item }}</view
        >
      </picker-view-column>
    </picker-view>
  </view>
</template>

<script lang="ts" setup>
import Taro from "@tarojs/taro";
import { onBeforeMount, onMounted, ref, watch } from "vue";
// import { areaList } from "@/utils/area";
// import { AreaType } from "@/alipayApiTypes";
import { getTwoNum, getMonthDate } from "@/utils/utils-alipay";

const yearList = ref<string[]>([]);
const monthList = ref<string[]>([]);
const dateList = ref<string[]>([]);

const value = ref([0, 0, 0]);

const props = defineProps<{
  isShowPicker: boolean;
  params: any;
  roomNo: string;
  initiate: string;
  type: boolean;
}>();
const type = ref(props.type);
const emit = defineEmits<{
  (e: "execute", params: { type: string; [key: string]: any }): void;
}>();
watch(type, val => {
  console.log(props.type, "执行了");
  
});
onBeforeMount(() => {
  initComponent();
});

const initComponent = () => {
  //TODO 初始化组件
  let thisYear = new Date().getFullYear();

  //生成年的时候往前推100年
  for (let i = thisYear; i < thisYear + 100; i++) {
    yearList.value.push(i.toString());
  }
  //   for (let i = thisYear; i > thisYear - 100; i--) {
  //     yearList.value.push(i.toString());
  //   }

  //生成月
  for (let i = 1; i <= 12; i++) {
    monthList.value.push(getTwoNum(i));
  }

  let day = getMonthDate(parseInt(yearList.value[0]), parseInt(monthList.value[0]));

  dateList.value = date2Arr(day);

  //默认选中当前年
  let idx = yearList.value.findIndex(item => {
    return item == getTwoNum(new Date().getFullYear());
  });
  // 默认选择当前月
  let idx2 = monthList.value.findIndex(item => {
    return item == getTwoNum(new Date().getMonth() + 1);
  });
  //默认选择当前日
  let idx3 = dateList.value.findIndex(item => {
    return item == getTwoNum(new Date().getDate());
  });
  value.value = [idx, idx2, idx3];
};

const onChange = e => {
  //   let totalList = areaList;

  let formerValue = value.value;

  let val = e.detail.value;

  //选择的是年
  if (formerValue[0] != val[0]) {
    let day = getMonthDate(parseInt(yearList[val[0]]), parseInt(monthList.value[0].toString()));

    dateList.value = date2Arr(day);

    value.value = [val[0], 0, 0];
  } else if (formerValue[1] != val[1]) {
    let day = getMonthDate(parseInt(yearList.value[val[0]]), parseInt(monthList.value[val[1]].toString()));
    dateList.value = date2Arr(day);
    value.value = [val[0], val[1], 0];
  } else {
    value.value = val;
  }
  console.log(e, "e");
};

const confirm = () => {
  emit("execute", {
    type: "confirm",
    birthday: `${yearList.value[value.value[0]]}-${monthList.value[value.value[1]]}-${dateList.value[value.value[2]]}`,
    ...props.params,
  });
};

const cancel = () => {
  emit("execute", {
    type: "cancel",
  });
};

const date2Arr = date => {
  let arr: string[] = [];
  for (let i = 1; i <= date; i++) {
    arr.push(getTwoNum(i).toString());
  }

  return arr;
};
</script>

<style lang="less">
@import "./index.less";
.area-picker {
  width: 100%;
  height: 700rpx;
  background: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 11;
  box-shadow: 0px -5px 20px #888888;
  border-radius: 28rpx 28rpx 0 0;

  .my-picker {
    width: 100%;
    height: 500rpx;
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .btnList {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    box-sizing: border-box;

    .confirm {
      color: #1e74fd;
    }
  }

  &.fadeOut {
    z-index: -1;
  }
}

.flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.transition {
  transition: linear 0.5s all;
}
</style>
